body.theme-cosmic {
    background: linear-gradient(135deg, #1e0030, #2c0a45, #1a0020);
    color: #e0d0b0;
}

.theme-cosmic .container {
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid #b8860b80;
    box-shadow: 0 0 20px rgba(184, 134, 11, 0.4),
    inset 0 0 15px rgba(255, 215, 0, 0.1);
}

.theme-cosmic h1 {
    color: #f0e68c;
    text-shadow: 0 0 10px rgba(240, 230, 140, 0.7);
}

.theme-cosmic label {
    color: #f0e68c;
}

.theme-cosmic select,
.theme-cosmic input,
.theme-cosmic button:not(.theme-toggle button) {
    background: rgba(40, 20, 60, 0.7);
    color: #fffacd;
    border-color: #b8860b;
}

.theme-cosmic select:focus,
.theme-cosmic input:focus {
    border-color: #daa520;
}

.theme-cosmic th {
    background: #b8860b20;
    color: #f0e68c;
    border-bottom-color: #b8860b;
}

.theme-cosmic td {
    border-bottom-color: #b8860b40;
}

.theme-cosmic tr:hover {
    background: rgba(184, 134, 11, 0.15);
}

.theme-cosmic button {
    background: #b8860b;
    color: white;
    border: 2px solid;
}

.theme-cosmic button:hover {
    background: #daa520;
}

.theme-cosmic .theme-toggle button {
    background: rgba(184, 134, 11, 0.3);
}

.theme-cosmic .theme-toggle button:hover {
    background: rgba(184, 134, 11, 0.6);
}

.theme-cosmic .nav-item {
    border: 2px solid;
    color: #f0e68c;
}